<template>
    <a-row>
        <a-col :span="2">
            <a-button type="primary" size="small" @click="onInsert">新增</a-button>
        </a-col>
        <a-col :span="4">
            <a-popconfirm title="确认要删除选中学生吗?"
                          ok-text="确定" cancel-text="取消" @confirm="onDeleteIds"
                          @visibleChange="onVisibleChange" :visible="visible">
                <a-button type="primary" size="small">删除选中</a-button>
            </a-popconfirm>
        </a-col>
        <a-col :span="4">
        </a-col>
        <a-col :span="4">
            <a-input v-model:value="dto.name" placeholder="输姓名" size="small"></a-input>
        </a-col>
        <a-col :span="4">
            <a-select v-model:value="dto.sex" placeholder="选性别" :allowClear="true" size="small">
                <a-select-option value="男">男</a-select-option>
                <a-select-option value="女">女</a-select-option>
            </a-select>
        </a-col>
        <a-col :span="4">
            <a-select v-model:value="dto.age" placeholder="选年龄" :allowClear="true" size="small">
                <a-select-option value="0,20">20以下</a-select-option>
                <a-select-option value="21,30">21~30</a-select-option>
                <a-select-option value="31,40">31~40</a-select-option>
                <a-select-option value="40,120">40以上</a-select-option>
            </a-select>
        </a-col>
        <a-col :span="2">
            <a-button @click="tableChange" type="primary" size="small">搜索</a-button>
        </a-col>
    </a-row>
    <hr>
    <a-table :columns="columns" :data-source="students" row-key="id"
             :pagination="pagination" @change="tableChange"
             :row-selection="{selectedRowKeys:ids,onChange:onSelectChange}">
        <template #bodyCell="{column, record}">
            <template v-if="column.dataIndex==='name'">
                {{ record.name + (record.sex === '男' ? '(大侠)' : '(女侠)') }}
            </template>

            <template v-else-if="column.dataIndex==='operation'">
                <a @click="onUpdate(record)">修改</a>
                <a-divider type="vertical"></a-divider>
                <a-popconfirm title="确认要删除该学生吗?"
                              ok-text="确定" cancel-text="取消" @confirm="onDelete(record.id)">
                    <a>删除</a>
                </a-popconfirm>
            </template>
        </template>
    </a-table>


<!--    <A4Save :id="id" :dto="saveDto" v-model:visible="saveVisible" @saved="onSaved"></A4Save>-->
    <A4Save :id="id" :dto="saveDto"
            v-model:visible="saveVisible" @saved="onSaved"></A4Save>
</template>

<script lang="ts" setup>
import A4Save from "./A4Save.vue";
import {computed, onUpdated, ref} from "vue";
import {usePagination, useRequest} from "vue-request";
import {AxiosRespPage, AxiosRespString, Student, StudentQueryDto} from "../model/Model8080.ts";
import axios from "../api/request";
import {PaginationProps} from "ant-design-vue";

const saveVisible = ref(false)
const id = ref(0);
const saveDto = ref({name: '', age: 20, sex: '男'});
const dto = ref({page: 1, size: 5, name: '', sex: null, age: null});

const ids = ref<number[]>([]);
const visible = ref(false)

const {data, total, run: search} = usePagination<AxiosRespPage<Student>, StudentQueryDto[]>(
    (d) => axios.get('/api/students/q', {params: d}), {
        defaultParams: [dto.value],
        pagination: {
            currentKey: "page",
            pageSizeKey: "size",
            totalKey: "data.data.total"
        }
    }
);

function onInsert() {
    saveVisible.value = true
    saveDto.value = {name: '', age: 20, sex: '男'}
}

function onSaved() {
    search(dto.value)
}


function onVisibleChange(v: boolean) {
    console.log(v);
    if (!v) {
        visible.value = false
    } else {
        visible.value = ids.value.length > 0
    }
}

async function onDelete(id: number) {
    console.log(id);
    await deleteById(id)
    search(dto.value)
}

function onUpdate(record: Student) {
    saveVisible.value = true
    id.value = record.id
    saveDto.value.name = record.name
    saveDto.value.sex = record.sex
    saveDto.value.age = record.age
}

function onSelectChange(keys: number[]) {
    console.log(keys);
    ids.value = keys
}

const {runAsync: deleteById} = useRequest<AxiosRespString, number[]>(
    (id) => axios.delete(`/api/students/${id}`), {
        manual: true
    }
);

const pagination = computed<PaginationProps>(() => {
    return {
        current: dto.value.page,
        pageSize: dto.value.size,
        total: total.value,
        showSizeChanger: true,
        pageSizeOptions: ["1", "5", "10", "20"]
    }
});

function tableChange(pagination: PaginationProps) {
    console.log(pagination);
    dto.value.page = pagination.current ?? 1
    dto.value.size = pagination.pageSize ?? 2
    search(dto.value)
}

async function onDeleteIds() {
    await deleteByIds(ids.value)
    ids.value = []
    search(dto.value)
}

const {runAsync: deleteByIds} = useRequest<AxiosRespString, number[][]>(
    (ids) => axios.delete('/api/students', {data: ids}), {
        manual: true
    });

// const {data} = useRequest<AxiosRespList<Student>>(() => axios.get('/api/students'));
console.log(data)
const students = computed(() => {
    return data.value?.data.data.list || []
});

function rowkey(r: Student) {
    return r.id
}

const columns = ref([{title: '编号', dataIndex: 'id'}, {title: '姓名', dataIndex: 'name'}
    , {title: '性别', dataIndex: 'sex'}, {title: '年龄', dataIndex: 'age'}, {title: '操作', dataIndex: 'operation'}]);
</script>

<style scoped>

</style>
